'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Button, Card, Col, DatePicker, Form, Input, Popconfirm, Row, Select, Statistic, Table} from 'antd';
import styles from '../index.less';
import ViewTitle from '../../components/ViewTitle';
import FormBase from '../../components/Base/FormBase';
import {FormField, ModalView, SearchForm} from 'antd-extra';
import moment from 'moment';
import 'moment/locale/zh-cn';
import ModalCreateOrEditShippingFee from "./modal/ModalCreateOrEditShippingFee";
import ModalShippingFeeDetail from "./modal/ModalShippingFeeDetail";

moment.locale('zh-cn');
const {RangePicker} = DatePicker;
const _ = require('lodash');

const {Option} = Select;
@Form.create()
@connect(({
            user,
            global,
            store,
            procure,
            finance
          }) => ({...user, ...global, ...procure, ...finance, ...store}))
export default class XShippingFee extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.onDataLoad().then(orders => {
      this.setState({orders});
    });
  }

  async onDataLoad() {
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      if (value === '') {
        payload[key] = undefined;
      }
    });
    const res = await this.props.dispatch({
      type: 'store/findShippingFeeMany',
      payload
    });

    return res.result;
  }

  cols = () => {
    return [
      {
        title: '承运人',
        dataIndex: 'deliverChannel',
        key: 'deliverChannel'
      },
      {
        title: '订单/采购单号',
        dataIndex: 'orderCode',
        key: 'orderCode', render: (value) => {
          const temp = value ? value : "非订单发货";
          return <div>{temp}</div>;
        }
      },
      {
        title: '商品/物料名称',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '数量',
        dataIndex: 'count',
        key: 'count'
      },
      {
        title: '应付运费',
        dataIndex: 'shippingFee',
        key: 'shippingFee'
      },
      {
        title: '实付运费',
        dataIndex: 'paymentAmount',
        key: 'paymentAmount',
      },
      {
        title: '备注',
        dataIndex: 'memo',
        key: 'memo'
      },
      {
        title: '操作', dataIndex: 'operation', key: 'operation',
        width: 140, fixed: 'right',
        render: (value, record) => {
          return (
            <span>
                   {<a style={{marginRight: '6px'}}
                       onClick={() => {
                         ModalView.open(ModalShippingFeeDetail,                           {
                             title: "运费详情",
                             width: '1080px'
                           }, {
                             record,
                             callback: (payload) => {
                               this.props.dispatch({
                                 type: 'store/updateShippingFee',
                                 payload
                               }).then(res => {
                                 this.requestReturn(res);
                                 this.componentDidMount();
                               });
                             }
                           });
                       }}>详情</a>}
              {<a disabled={record.orderCode} style={{marginRight: '6px'}}
                  onClick={() => {
                    ModalView.open(ModalCreateOrEditShippingFee,
                      {
                        title: "编辑运费",
                        width: '720px'
                      }, {
                        record,
                        callback: (payload) => {
                          this.props.dispatch({
                            type: 'store/updateShippingFee',
                            payload
                          }).then(res => {
                            this.requestReturn(res);
                            this.componentDidMount();
                          });
                        }
                      });
                  }}>编辑</a>}
              {<Popconfirm
                title="确认删除"
                onConfirm={() => {
                  const {code} = record;
                  this.props.dispatch({
                    type: 'store/deleteShippingFee',
                    payload: {code}
                  }).then(res => {
                    this.requestReturn(res);
                    this.componentDidMount();
                  });
                }}
                okText="是"
                cancelText="否"
              >
                <a disabled={record.orderCode} style={{marginRight: '6px'}}>删除</a>
              </Popconfirm>}
            </span>
          );
        }
      }
    ];
  };

  render() {
    const {_notify, form} = this.props;
    const {orders = {}, showDetail, record} = this.state;
    const {list = [], fee = 0, count = 0,payment} = orders;
    // if (_notify) {
    //   notify(_notify);
    // }

    return (
      <Form className={styles.content}>
        <ViewTitle
          title={`运费列表`}
          level={1}
          actions={<Button type={'primary'}
            onClick={() => {
              ModalView.open(ModalCreateOrEditShippingFee,
                {
                  title: "添加运费",
                  width: '720px'
                }, {
                  callback: (payload) => {
                    this.props.dispatch({
                      type: 'store/createShippingFee',
                      payload
                    }).then(res => {
                      this.requestReturn(res);
                      this.componentDidMount();
                    });
                  }
                });
            }}>添加</Button>}
        ></ViewTitle>
        <SearchForm
          style={{marginLeft: '6px', marginRight: '6px'}}
          onSearch={() => {
            this.state.current = 1;
            this.componentDidMount();
          }}
          onReset={this.handleReset}
          cols={4}
          min={8}
          expandText="展开"
          form={form}
        >
          {[
            <FormField
              label={"承运人"}
              name={"deliverChannel"}
              key={"deliverChannel"}
            >
              <Input></Input>
            </FormField>

          ]}
        </SearchForm>

        <div style={{background: '#ECECEC', padding: '30px'}}>
          <Row gutter={16}>
            <Col span={8}>
              <Card>
                <Statistic
                  title="发货商品数量"
                  value={count}
                  precision={2}
                  valueStyle={{color: '#3f8600'}}
                  suffix="KG"
                />
              </Card>
            </Col>
            <Col span={8}>
              <Card>
                <Statistic
                  title="运费总金额"
                  value={fee}
                  precision={2}
                  valueStyle={{color: '#11f'}}
                  suffix="元"
                />
              </Card>
            </Col>
            <Col span={8}>
              <Card>
                <Statistic
                  title="实付运费总金额"
                  value={payment}
                  precision={2}
                  valueStyle={{color: '#11f'}}
                  suffix="元"
                />
              </Card>
            </Col>
          </Row>
        </div>
        <Table
          className={styles.antTable}
          bordered={true}
          columns={this.cols()}
          dataSource={list}
          scroll={{x: true}}
          pagination={true}
          //scroll={{ x: 1300 }}
        ></Table>
        {/*{showDetail && <Drawer*/}
        {/*  visible={showDetail}*/}
        {/*  title={`统计`}*/}
        {/*  placement="left"*/}
        {/*  width={'80%'}*/}
        {/*  style={{padding: 0}}*/}
        {/*  // maskClosable={false}*/}
        {/*  onClose={() => {*/}
        {/*    this.setState({showDetail: false});*/}
        {/*    this.componentDidMount();*/}
        {/*  }}*/}
        {/*>*/}
        {/*  <ModalShippingFeeDetail*/}
        {/*    values={record}*/}
        {/*  > </ModalShippingFeeDetail>*/}
        {/*</Drawer>}*/}
      </Form>
    );
  }
}
